<!--
 * @Author: your name
 * @Date: 2021-06-03 21:07:53
 * @LastEditTime: 2021-06-03 21:10:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \画布\画笔.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas实现简单的画图工具中画笔效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas width="500" height="500" style="background:#eee;"></canvas>
    <script>
        var canvas = document.getElementsByTagName("canvas")[0];
        var con = canvas.getContext("2d");
        canvas.onmousedown = function (e) {
            var mx = e.clientX,
                my = e.clientY;
            con.moveTo(mx, my);
            canvas.onmousemove = function (e) {
                var ex = e.clientX,
                    ey = e.clientY;
                con.lineTo(ex, ey);
                con.stroke();
            }
            canvas.onmouseup = function () {
                canvas.onmousemove = null;
                canvas.onmouseup = null;
            }
        }
    </script>
</body>

</html>